import React, { useEffect, useState } from 'react';
import { AutoComplete, Box, OptionsType } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { useDebounce } from 'hooks/useDebounce';
import {
  ConnectionOptions,
  ProviderAddress,
  ProviderApartment,
  useConnectionAvailabilityAddressLazyQuery,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import Property from './Property';

interface IProps {
  color?: MainColorType;
  subscriptionId?: string;
  onComplete: (
    address: ProviderAddress,
    property: ProviderApartment,
    option: ConnectionOptions,
  ) => void;
}

const Address = ({ color, onComplete }: IProps) => {
  const { t } = useTranslation('flutningur');

  const [selectedAddress, setSelectedAddress] = useState<ProviderAddress>({});

  const [getResults, { data: queryResults }] = useConnectionAvailabilityAddressLazyQuery({
    onCompleted: (data) => {
      setAddressData(data);
    },
  });

  const [addressData, setAddressData] = useState(queryResults);
  const [address, setAddress] = useState('');
  const [options, setOptions] = useState<Array<OptionsType>>([]);
  const [menuOpen, setMenuOpen] = useState(true);

  const streetAutocomplete = (query: string) => {
    getResults({
      variables: { input: { query: query } },
    });
  };

  useDebounce(
    () => {
      if (address.length >= 3) {
        setMenuOpen(true);
        streetAutocomplete(address);
      }
    },
    250,
    [address],
  );

  useEffect(() => {
    const options = addressData?.connectionAvailabilityAddress?.map((a) => ({
      value: a,
      label: a?.line,
    }));

    if (!options?.length) {
      setMenuOpen(false);
    }
    setOptions(options as Array<OptionsType>);
  }, [addressData]);

  return (
    <>
      <Box>
        <AutoComplete
          id="AddressInput"
          label={t('autoComplete.label')}
          placeholder={t('autoComplete.placeHolder')}
          name="Address Input"
          renderAs="select"
          maxMenuHeight={250}
          loadingMessage={() => t('autoComplete.loadingMessage')}
          noOptionsMessage={() => t('autoComplete.noOptionMessage')}
          menuIsOpen={menuOpen}
          dropdownIcon={{ icon: 'location', color: color, viewBox: 24 }}
          isClearable={true}
          color={color}
          onInputChange={(e) => {
            setAddress(e ?? '');
          }}
          options={options}
          onChange={(e) => {
            const selectedOption = e ? e.value : '';
            setMenuOpen(false);

            if (selectedOption) {
              setSelectedAddress(selectedOption as ProviderAddress);
            }
          }}
        />
      </Box>
      {selectedAddress && (
        <Property
          color={color}
          address={selectedAddress}
          onSelectProperty={(p, o) => onComplete(selectedAddress, p, o)}
        />
      )}
    </>
  );
};

export default Address;